<!DOCTYPE HTML>
<html ng-app="chinaums.angular.app" ng-controller="indexController as vm">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap-theme.min.css"/>
    <script type="application/javascript" src="webjars/angularjs/1.6.0/angular.min.js"></script>
    <script type="application/javascript" src="webjars/angularjs/1.6.0/angular-animate.min.js"></script>
    <script type="application/javascript" src="webjars/angularjs/1.6.0/angular-route.min.js"></script>
    <script type="application/javascript" src="webjars/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
    <script type="application/javascript" src="global.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <script type="application/javascript" src="index.js"></script>
    <title>{{vm.appTitle}}</title>
</head>
<body>

<header>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="javascript:void(0)">{{vm.appTitle}}</a>
            </div>

            <ul class="nav navbar-nav nav-tabs">
                <li role="presentation" ng-repeat="page in vm.tabs"
                    ng-class="{active: vm.activePage.target === page.target}" ng-click="vm.openTab(page)">
                    <a href="javascript:void(0)">{{page.name}}
                        <button type="button" class="close tab-close" ng-show="page.closable"
                                ng-click="vm.closeTab(page)">&times;</button>
                    </a>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li uib-dropdown>
                    <a uib-dropdown-toggle href>{{vm.activeSystem.title}} <span class="caret"></span></a>
                    <ul uib-dropdown-menu>
                        <li ng-repeat="system in vm.systems" ng-class="{active: vm.isCurrentSystem(system)}"
                            ng-click="vm.changeSystem(system)"><a href>{{system.title}}</a>
                        </li>
                    </ul>
                </li>
                <li><a href ng-click="vm.logout()"><i class="fa fa-logout glyphicon glyphicon-log-out"></i> 退出</a></li>
            </ul>
        </div>
    </nav>
</header>

<div id="center">
    <div id="left-nav">
        <div id="accordion" class="panel-group">
            <div class="panel panel-default" ng-repeat="menuGroup in vm.menu | orderBy:'id'">
                <div class="panel-heading" ng-click="vm.display(menuGroup)">
                    <h4 class="panel-title"><a class="accordion-toggle">{{menuGroup.title}}</a></h4>
                </div>
                <div id="accordion_{{menuGroup.id}}" class="panel-collapse"
                     ng-class="{collapse: vm.activeMenuGroup.id !== menuGroup.id}">
                    <div class="panel-body">
                        <ul>
                            <li ng-repeat="menuItem in menuGroup.items" ng-class="{active: vm.isCurrentPage(menuItem)}"
                                ng-click="vm.openTab(menuItem)">{{menuItem.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="main">
        <iframe class="tab-page" ng-repeat="page in vm.tabs" ng-src="{{page.target + '.html'}}" ng-show="vm.isCurrentPage(page)"></iframe>
    </div>
</div>

<footer class="text-center">©2017 银联商务厦门分公司</footer>
</body>
</html>